(() => {
    new Vue({
        el: '#bar2',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            stu_nameArr: [],
            gpaArr: []

        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getIndex()
            this.altIndex()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getGpa/getDashujuGpa'),
                        axios.get('http://localhost:8001/getGpa/getJisuanjiyingyongGpa'),
                        axios.get('http://localhost:8001/getGpa/getRuanjiangongchengGpa'),
                        axios.get('http://localhost:8001/getGpa/getRuanjianjishuGpa'),
                        axios.get('http://localhost:8001/getGpa/getWangluogongchengGpa'),
                        axios.get('http://localhost:8001/getGpa/getWangluojishuGpa'),
                        axios.get('http://localhost:8001/getGpa/getWulianwangGpa'),
                        axios.get('http://localhost:8001/getGpa/getXinxiguanliGpa')
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },

            //获得点击下标
            getIndex() {
                setTimeout(() => {
                    window.index = 0
                    $('.sell').change(function () {
                        index = this.selectedIndex
                        // console.log("selectedIndex/window.index:", index)
                    })

                }, 500)
            },

            //赋值Index
            altIndex() {
                setTimeout(() => {
                    $('.sell').change(() => {
                        this.Index = index
                        // console.log("赋值Index:", this.Index)
                    })
                }, 1000)
            },

            //得到index后获取相应专业的数组,使用watch监视
            getArr() {
                setTimeout(() => {
                    // console.log("====getArr()被调用了====")
                    console.log(this.Data[this.Index])
                }, 600)
            },

            //分别把相应专业的stu_name前6取出为列表
            getStu_name() {
                arr = []
                this.stu_nameArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < 6; i++) {
                        this.stu_nameArr.push(arr[i].stu_name)
                    }
                }, 555)
                // console.log("this.stu_nameArr:", this.stu_nameArr)
            },

            //分别把相应专业的gap前6取出为列表
            getGpa() {
                arr = []
                this.gpaArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < 6; i++) {
                        this.gpaArr.push(arr[i].gpa)
                    }
                }, 555)
                // console.log("this.gpaArr:", this.gpaArr)
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {
                    myChart = echarts.init(document.getElementById('bar2')),
                        option = {
                            // backgroundColor: "#003366",
                            grid: {
                                left: '2%',
                                right: '2%',
                                bottom: '2%',
                                top: '2%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'none'
                                },
                                formatter: function (params) {
                                    return params[0].name + ' : ' + params[0].value
                                }
                            },
                            xAxis: {
                                show: false,
                                type: 'value'
                            },
                            yAxis: [{
                                type: 'category',
                                inverse: true,
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(250,250,250,0.6)',
                                        fontSize: 10
                                    },
                                },
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                data: this.stu_nameArr//名字显示
                            }, {
                                type: 'category',
                                inverse: true,
                                axisTick: 'none',
                                axisLine: 'none',
                                show: true,
                                axisLabel: {
                                    textStyle: {
                                        color: 'rgba(250,250,250,0.6)',
                                        fontSize: 10
                                    },
                                },
                                data: this.gpaArr//绩点显示
                            }],
                            series: [{
                                name: '值',
                                type: 'bar',
                                zlevel: 1,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 30,
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: 'rgb(57,89,255,1)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(46,200,207,1)'
                                        }]),
                                    },
                                },
                                barWidth: 8,
                                data: this.gpaArr
                            }]
                        };
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                }, 600)
            }
            //=====echarts======

          

        },
        watch: {
            Index: {
                immediate: true,
                handler(newValue, oldValue) {
                    // console.log("Index被修改了", newValue, oldValue);
                    this.getStu_name()
                    this.getGpa()
                    this.drawEcharts()
                }
            }
        }
           


    })
})();